<template>
  <view class="vip-wrap">
    <image class="vip-banner" src="/static/img/vip-banner.png" mode="widthFix" alt="会员专享" />
    <view class="vip-title">会员专享，畅享更多权益！</view>
    <view class="vip-desc">
      仅需 <text class="vip-price">6.9元</text>，立享专属优惠与特权！
    </view>
    <view class="vip-benefits">
      <view class="benefit">· 充电享专属折扣</view>
      <view class="benefit">· 优先客服服务</view>
      <view class="benefit">· 更多会员专属福利</view>
    </view>
    <button class="vip-btn" @click="openVip">立即开通会员</button>
    <!-- 会员弹窗 -->
    <view v-if="showVipPopup" class="custom-popup-mask" @click.self="cancelVip">
      <view class="custom-popup">
        <view class="popup-title">确认开通会员</view>
        <view class="popup-desc">
          开通会员仅需
          <text style="color: #ff710b; font-weight: bold">6.9元</text>，是否确认开通？
        </view>
        <view class="popup-actions">
          <button class="popup-btn confirm" @click="confirmVip">确认开通</button>
          <button class="popup-btn cancel" @click="cancelVip">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showVipPopup: false
    }
  },
  methods: {
    openVip() {
      this.showVipPopup = true;
    },
    async confirmVip() {
      this.showVipPopup = false;
	  const res = await this.$request('user/pay-month-card',{
	  		uid: uni.getStorageSync('uid'),
	  		type: '1',
	  		price: 6.9,
	  		month: 1,
	  })
	  if(res.result == 0){
	  		this.$util.msg('开通会员成功')
	  }else{
	  		this.$util.msg(res.resultNote)
	  }
      // this.$util && this.$util.msg
      //   ? this.$util.msg("开通会员功能开发中~")
      //   : uni.showToast({ title: "开通会员功能开发中~", icon: "none" });
    },
    cancelVip() {
      this.showVipPopup = false;
    }
  }
}
</script>

<style scoped lang="scss">
.vip-wrap {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  min-height: 100vh;
  justify-content: flex-start;
}
.vip-banner {
  width: 90vw;
  max-width: 600rpx;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(255,113,11,0.10);
}
.vip-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF710B;
  margin-bottom: 20rpx;
  text-align: center;
}
.vip-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 30rpx;
  text-align: center;
  .vip-price {
    color: #FF710B;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.vip-benefits {
  margin-bottom: 50rpx;
  .benefit {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
    text-align: center;
  }
}
.vip-btn {
  width: 480rpx;
  height: 90rpx;
  background-color: #FF710B !important;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 45rpx;
  text-align: center;
  line-height: 90rpx;
  box-shadow: 0 8rpx 32rpx 0 rgba(255,113,11,0.10);
  margin-top: 30rpx;
}
.custom-popup-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.custom-popup {
  width: 100vw;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 48rpx 32rpx 32rpx 32rpx;
  text-align: center;
  box-shadow: 0 -4rpx 24rpx 0 rgba(0,0,0,0.08);
  animation: popupIn .25s;
}
@keyframes popupIn {
  from { transform: translateY(100%);}
  to { transform: translateY(0);}
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 20rpx;
}
.popup-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 40rpx;
}
.popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 32rpx;
}
.popup-btn {
  flex: 1;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 40rpx;
  border: none;
  margin: 0 8rpx;
}
.confirm {
  background: #ff710b;
  color: #fff;
}
.cancel {
  background: #f5f5f5;
  color: #333;
}
</style>
